<template>
  <view class="container">
    <view class="form-wrapper">
      <uni-forms :model="form" :rules="rules">
        <view class="avatar-section">
          <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <image :src="form.avatarUrl" class="avatar"></image>
          </button>
        </view>
        <view class="q-my-md row items-center ">
          <view class="col-2 q-mr-md">昵称</view>
          <view class="col-8">
            <input v-model="form.nickName" class="" placeholder="请输入昵称" type="nickname" @change="onChooseName">
          </view>
        </view>

        <view class="q-my-md row items-center ">
          <view class="col-2 q-mr-md">性别</view>
          <view class="col-8">
            <uni-data-checkbox v-model="form.gender" :localdata="sexs"/>
          </view>
        </view>
        <view class="q-my-md row items-center ">
          <view class="col-2 q-mr-md">邮箱</view>
          <view class="col-8">
            <input v-model="form.email" class="" placeholder="请输入邮箱">
          </view>
        </view>
        <div class=" q-pb-xs  text-size-12 row items-center  justify-center   q-py-md ">
          <uni-data-checkbox v-model="readPrivacy" :multiple="true" :localdata="[{
  text: '我同意',
  value: 1
}]"></uni-data-checkbox>
<!--          <span class="q-mr-sm">我同意</span>-->
          <a class="text-primary" style="text-decoration: underline;"
             @click.stop="gotoPage('agreement')">用户协议</a>
          <span class="q-mx-sm">和</span>
          <a class="text-primary" style="text-decoration: underline;"
             @click.stop="gotoPage('privacyPolicy')">隐私政策</a>
        </div>

        <view class="q-mt-lg">
          <button type="submit" @click="onSubmit">保存</button>
        </view>
      </uni-forms>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {useCommonStore} from "@/stores/commonStore";


const commonStore = useCommonStore()
const {nickName, email, gender, avatarUrl} = commonStore.userData

const form = ref({
  nickName: nickName || '',
  avatarUrl: avatarUrl || '',
  gender: gender || 0,
  email: email || '',
});

const readPrivacy = ref([])
const rules = {
  nickName: {
    required: true,
    message: '昵称不能为空',
    trigger: 'blur',
  },
};
const sexs = [{
  text: '保密',
  value: 0
}, {
  text: '女',
  value: 1
}, {
  text: '男',
  value: 2
}]

function onChooseAvatar(e: any) {
  if (!e) return;
  const {avatarUrl} = e.detail;
  form.value.avatarUrl = avatarUrl;
}

function onChooseName(e: any) {
  console.log(e)
  form.value.nickName = e.detail.value
}

function gotoPage(routerName: string) {

  uni.navigateTo({
    url: '/pages/agreement/' + routerName
  });
}

function onSubmit() {
  if (readPrivacy.value.length===0) {
    uni.showToast({
      title: '请阅读用户协议之后同意再保存',
      icon: 'none'
    });
    return
  }
  console.log(form.value)
  if (form.value.nickName && form.value.avatarUrl) {

    commonStore.setUserInfo(form.value)
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    });
  } else {
    uni.showToast({
      title: '请完善表单信息',
      icon: 'none'
    });
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.form-wrapper {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

.avatar-section {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.avatar-wrapper {
  border: none;
  background: none;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #ddd;
}
</style>
